<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件管理</title>
        <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    </head>
    <body class="pear-container">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">事件名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="a.eventName\@like" placeholder="" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">事件分类</label>
                            <div class="layui-input-inline">
                                <select name="a.eventType">
                                    <option value="" selected>请选择</option>
                                    @for(item in eventType!){
                                    <option value="${item.id}" ${item.id==(eventInfo.eventType!)?'selected':''}>${item.typeName!}</option>
                                    @}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="a.enable" lay-search="">
                                    <option value="">全部</option>
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="event-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-body">
                <table id="event-table" lay-filter="event-table"></table>
            </div>
        </div>

        <script type="text/html" id="event-toolbar">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
                新增
            </button>
            <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
                <i class="layui-icon layui-icon-delete"></i>
                删除
            </button>
            <button class="pear-btn pear-btn-info pear-btn-md" lay-event="eventList">
                <i class="layui-icon layui-icon-list"></i>
                违章消息
            </button>
        </script>

        <script type="text/html" id="event-bar">
            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
            <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
        </script>

        <script type="text/html" id="event-enable">
            <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="event-enable"  {{d.enable==1?'checked':''}} />
        </script>
        <script type="text/html" id="algorithm-enable">
            <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="algorithm-enable"  {{d.status==1?'checked':''}} />
        </script>

        <script type="text/html" id="icon">
            <i class="layui-icon {{d.icon}}"></i>
        </script>

        <script src="../../component/layui/layui.js"></script>
        <script src="../../component/pear/pear.js"></script>
        <script>
            layui.use(['table','form','jquery','treetable','toast'],function () {
                let table = layui.table;
                let form = layui.form;
                let $ = layui.jquery;
                let toast = layui.toast;

                let MODULE_PATH = "${ctxPath}/event/";

                let cols = [
                    [
                        {type:'checkbox'},
                        {title: '事件名称', field: 'eventName', align:'center'},
                        {title: '事件分类', field: 'typeName', align:'center'},
                        {title: '算法名', field: 'algorithm', align:'center'},
                       /* {title: '违章消息', field: 'algorithmKey', align:'center'},
                        {title: '默认启用', field: 'status', align:'center',templet:'#algorithm-enable'},*/
                        {title: '事件图标', field: 'icon', align:'center',templet:'#icon'},
                        {title: '备注', field: 'remark', align:'center'},
                        {title: '状态', field: 'enable', align:'center', templet:'#event-enable'},
                        {title: '创建时间', field: 'createTime', align:'center',width: 170},
                        {title: '操作', toolbar: '#event-bar', align:'center', width:120}
                    ]
                ]

                table.render({
                    elem: '#event-table',
                    url: MODULE_PATH + 'data/list',
                    page: true ,
                    cols: cols ,
                    skin: 'line',
                    toolbar: '#event-toolbar',
                    height: 'full-180',
                    defaultToolbar: ''
                });

                table.on('tool(event-table)',function(obj){
                    if (obj.event === 'remove') {
                        window.remove(obj);
                    } else if (obj.event === 'edit') {
                        window.edit(obj);
                    }
                })


                table.on('toolbar(event-table)', function(obj){
                    if(obj.event === 'add'){
                        window.add();
                    } else if(obj.event === 'batchRemove'){
                        window.batchRemove(obj);
                    } else if(obj.event === 'eventList'){
                        window.eventList();
                    }
                });

                form.on('switch(event-enable)', function(obj) {
                    let loading = layer.load();
                    $.ajax({
                        url: MODULE_PATH+"data/changeState?id="+this.value+"&state="+(obj.elem.checked?1:0),
                        dataType:'json',
                        type:'post',
                        success:function(result){
                            layer.close(loading);
                            if(result.code == 0) {
                                toast.success({title: "系统消息", message: result.message,position: 'topRight'});
                            }else{
                                toast.error({title: "系统消息",message: result.message,position: 'topRight'});
                            }
                        }
                    });
                });

                form.on('switch(algorithm-enable)', function(obj) {
                    let loading = layer.load();
                    $.ajax({
                        url: MODULE_PATH+"data/changeStatus?id="+this.value+"&state="+(obj.elem.checked?1:0),
                        dataType:'json',
                        type:'post',
                        success:function(result){
                            layer.close(loading);
                            if(result.code == 0) {
                                toast.success({title: "系统消息", message: result.message,position: 'topRight'});
                            }else{
                                toast.error({title: "系统消息",message: result.message,position: 'topRight'});
                            }
                        }
                    });
                });

                form.on('submit(event-query)', function(data){
                    table.reload('event-table',{where: data.field,page: {curr: 1}})
                    return false;
                });
                window.eventList = function(){
                    layer.open({
                        type: 2,
                        title: '违章消息列表',
                        shade: 0.1,
                        area: ['1200px', '820px'],
                        content: MODULE_PATH + 'view/eventlist'
                    });
                }

                window.add = function(){
                    layer.open({
                        type: 2,
                        title: '新增事件配置',
                        shade: 0.1,
                        area: ['490px', '480px'],
                        content: MODULE_PATH + 'data/add'
                    });
                }

                window.edit = function(obj){
                    layer.open({
                        type: 2,
                        title: '修改事件配置',
                        shade: 0.1,
                        area: ['490px', '480px'],
                        content: MODULE_PATH + 'data/edit?id='+obj.data['id']
                    });
                }

                window.remove = function(obj){
                    layer.confirm('确定要删除该事件配置？', {icon: 3, title:'提示'}, function(index){
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: MODULE_PATH+"data/remove?ids="+obj.data['id'],
                            dataType:'json',
                            type:'delete',
                            success:function(result){
                                layer.close(loading);
                                if(result.code == 0){
                                    layer.msg(result.message,{icon:1,time:1000},function(){
                                        obj.del();
                                    });
                                }else{
                                    layer.msg(result.message,{icon:2,time:1000});
                                }
                            }
                        })
                    });
                }

                window.batchRemove = function(obj) {
                    let data = table.checkStatus(obj.config.id).data;
                    if (data.length === 0) {
                        layer.msg("未选中记录", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    let ids = "";
                    for (let i = 0; i < data.length; i++) {
                        ids += data[i].id + ",";
                    }
                    ids = ids.substr(0, ids.length - 1);
                    layer.confirm('确定要删除这些事件配置？', {
                        icon: 3,
                        title: '提示'
                    }, function(index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: MODULE_PATH + "data/remove?ids=" + ids,
                            dataType: 'json',
                            type: 'delete',
                            success: function(result) {
                                layer.close(loading);
                                if (result.code == 0) {
                                    layer.msg(result.message, {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        table.reload('event-table');
                                    });
                                } else {
                                    layer.msg(result.message, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    });
                }

                window.refresh = function(param) {
                    table.reload('menu-table');
                }
            })
        </script>
    </body>
</html>